<template>
    <el-container>
        <el-header>
            <div style="margin: auto">
                <el-input
                        style="width: 400px;"
                        :disabled="true"
                        v-model="selectMoudle.title"
                >
                    <template slot="prepend">当前选中的问卷为:</template>
                </el-input>
                <el-button
                        type="success"
                        @click="newAnswer"
                >
                    此卷新增回答
                </el-button>
                <el-button
                        type="danger"
                        @click="countAnswer"
                >
                    此卷统计结果
                </el-button>
            </div>

            <el-input
                    style="width: 400px;"
                    :disabled="true"
                    v-model="selectUser.uid"

            >
                <template slot="prepend">当前选中的用户为:</template>
            </el-input>
            <el-button
                    type="primary"
                    @click="lookUserAnswer"
            >
                查看此人此卷的回答
            </el-button>
            <el-button
                    type="warning"
                    @click="continueAnswer"
            >
                此人继续回答此卷
            </el-button>
        </el-header>
        <el-main>
            <el-row class="tac" :gutter="30">
                <el-col :span="8" >
                    <div style="height: 80vh;">
                        <div class="sidebar-title" >已发布的问卷</div>
                        <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
                            <el-menu
                                    class="el-menu-vertical-demo"
                                    background-color="#304156"
                                    text-color="#fff"
                                    active-text-color="#ffd04b">
                                <el-menu-item @click="handleMould(item)"  v-for="(item, index) in allMoudle">
                                    <svg-icon icon-class="文本" style="margin-right:5px"/>
                                    <span slot="title">{{item.title}}</span>
                                </el-menu-item>
                            </el-menu>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="8" >
                    <div style="height: 80vh;">
                        <div class="sidebar-title" >回答此问卷的用户有:</div>
                        <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
                            <el-menu
                                    class="el-menu-vertical-demo"
                                    background-color="#304156"
                                    text-color="#fff"
                                    active-text-color="#ffd04b">
                                <el-menu-item @click="handleUser(item)" v-for="(item, index) in allUserByOneMoudle">
                                    <svg-icon icon-class="回答用户" style="margin-right:5px"/>
                                    <span slot="title">{{item.uid}}</span>
                                </el-menu-item>
                            </el-menu>
                        </el-scrollbar>
                    </div>
                </el-col>
                <el-col :span="8" >
                    <div style="height: 80vh;">
                        <div class="sidebar-title" >此用户回答过的问卷有:</div>
                        <el-scrollbar wrap-class="scrollbar-wrapper" style="height:100%">
                            <el-menu
                                    class="el-menu-vertical-demo"
                                    background-color="#304156"
                                    text-color="#fff"
                                    active-text-color="#ffd04b">
                                <el-menu-item @click="handleMouldByUser(item)" v-for="(item, index) in someMoudleByOneUser">
                                    <svg-icon icon-class="文本" style="margin-right:5px"/>
                                    <span v-if="item.qu_mould != null" slot="title">{{item.qu_mould.title||''}}</span>
                                </el-menu-item>
                            </el-menu>
                        </el-scrollbar>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

</template>

<script>
    import { get, post ,postBody} from '@/utils/httpUtil'
    export default {
        name: "viewQue",
        data() {
            return {
                allMoudle:[],
                allUserByOneMoudle:[],
                someMoudleByOneUser:[],
                selectMoudle:{},
                selectUser:{},
                allMoudleQuery: {
                    queryMap: {
                        state:2
                    },
                    page:1,
                    rows: 999,
                    total: 10
                },
                allUserByOneMoudleQuery: {
                    queryMap: {
                        mouldId__equal:''
                    }
                },
                someMoudleByOneUserQuery: {
                    queryMap: {
                        uid__equal:''
                    }
                },

            }
        },
        methods: {
            getAllMoudle() {
                get("/questionMould/getPage", this.allMoudleQuery).then(resp => {
                    if (resp.result) {
                        this.allMoudle = resp.data.list
                        this.allMoudleQuery.total = resp.data.total
                    }
                })
            },
            getAllUserByOneMoudleList() {
                get("/quUserQues/getGroup", this.allUserByOneMoudleQuery).then(resp => {
                    if (resp.result) {
                        this.allUserByOneMoudle = resp.data
                        this.allUserByOneMoudleQuery.total = resp.data.length
                    }
                })
            },
            getSomeMoudleByOneUserList() {
                get("/quUserQues/getGroup", this.someMoudleByOneUserQuery).then(resp => {
                    if (resp.result) {
                        this.someMoudleByOneUser = resp.data
                        this.someMoudleByOneUserQuery.total = resp.data.length
                    }
                })
            },
            handleMould(mould, keyPath) {
                this.selectMoudle = mould;
                this.selectUser ={}
                this.someMoudleByOneUser=[];
                this.allUserByOneMoudle =[];
                this.allUserByOneMoudleQuery.queryMap.mouldId__equal = mould.id;
                this.getAllUserByOneMoudleList();
            },
            handleUser(user, keyPath){
                this.selectUser = user;
                this.someMoudleByOneUserQuery.queryMap.uid__equal = user.uid;
                this.getSomeMoudleByOneUserList();
            },
            handleMouldByUser(userMould, keyPath){
                this.selectMoudle = userMould.qu_mould;
            },
            newAnswer(){
                if(JSON.stringify(this.selectMoudle) == "{}"){
                    this.$notify({
                        title: '提示',
                        message: '没选问卷啊！',
                        type: 'warning',
                        duration: 2000
                    })
                }else{
                    // this.$router.push({name: 'newAnswer', query: {mid: this.selectMoudle.id,mtitle:this.selectMoudle.title }})
                    let routeUrl = this.$router.resolve({
                        path: "/newAnswer",
                        query: {mid: this.selectMoudle.id,mtitle:this.selectMoudle.title }
                    });
                    window.open(routeUrl.href, '_blank');
                }

            },
            lookUserAnswer(){
                if(JSON.stringify(this.selectUser) == "{}"){
                    this.$notify({
                        title: '提示',
                        message: '没选用户啊！',
                        type: 'warning',
                        duration: 2000
                    })
                }else{
                    this.$router.push({name: 'doAnswer',
                        query: {
                            mid: this.selectMoudle.id,
                            mtitle:this.selectMoudle.title,
                            uid:this.selectUser.uid,
                            isLook:'true'
                        }
                    })
                }

            },
            continueAnswer(){
                if(JSON.stringify(this.selectUser) == "{}"){
                    this.$notify({
                        title: '提示',
                        message: '没选用户啊！',
                        type: 'warning',
                        duration: 2000
                    })
                }else{
                    this.$router.push({name: 'doAnswer',
                        query: {
                            mid: this.selectMoudle.id,
                            mtitle:this.selectMoudle.title,
                            uid:this.selectUser.uid,
                            isLook:'false'
                        }
                    })
                }

            },
            countAnswer(){
                if(JSON.stringify(this.selectMoudle) == "{}"){
                    this.$notify({
                        title: '提示',
                        message: '没选问卷啊！',
                        type: 'warning',
                        duration: 2000
                    })
                }else{
                    this.$router.push({name: 'count',
                        query: {
                            mid: this.selectMoudle.id,
                            mtitle:this.selectMoudle.title,
                            isLook:'true'
                        }
                    })
                }

            }


        },
        created() {
            this.getAllMoudle()
        }
    }
</script>

<style scoped lang="scss">
    .sidebar-title {
        position: relative;
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #2b2f3a;
        text-align: center;
        overflow: hidden;
        display: inline-block;
        margin: 0;
        color: #fff;
        font-weight: 600;
        line-height: 50px;
        font-size: 14px;
        font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
        vertical-align: middle;
    }
</style>
